<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow
                 title="搜索中心"
                 @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search show-action
                placeholder="请输入搜索关键词"
                shape="round"
                v-model.trim="keyword"
                @input="getSuggestions"
                @focus="isFocus = true"
                @blur="delayTime">
      <template #action>
        <div @click="clickSearchBtn">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-show="isFocus && keyword">
      <van-cell icon="search"
                v-for="(item,index) in handlerSuggestionList"
                :key="item"
                @click="clickSuggest(index)">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-show="isFocus && !keyword">
      <van-cell title="
                历史记录">
      </van-cell>
      <van-cell :title="item"
                v-for="(item,index) in history"
                :key="item"
                @click="$router.push('/result?keyword='+item)">
        <van-icon name="close"
                  @click.stop="delHistory(index)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>
<script>
// 默认什么都不展示 输入框获取焦点历史记录会展示  失去焦点历史记录会隐藏
// 输入框输入会展示联想建议 只要一失去焦点都不展示了
import { reqGetSuggestions } from '@/api/search'
import { setHistory, getHistory } from '@/utils/storage'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggestionsList: [], // 联想建议的数据
      history: getHistory() || [], // 历史记录数据 假数据下次写成活的
      timerId: null,
      isFocus: false
    }
  },
  methods: {
    getSuggestions () {
      // 要保证这里面只发一次请求, 只能有一个延时  函数防抖(函数节流)
      clearTimeout(this.timerId)
      // 空字符不发送请求 对应清空数组
      this.timerId = setTimeout(async () => {
        if (this.keyword === '') {
          this.suggestionsList = []
          return
        }
        // 输入框输入有值就发请求
        const data = await reqGetSuggestions(this.keyword)
        console.log(data)
        // 将获取的数据存储在data中
        this.suggestionsList = data.data.options
      }, 300) // 等待时间一般设置 100ms - 300ms左右  相对降低服务器的请求次数
    },
    // 点击搜索按钮存储历史
    clickSearchBtn () {
      if (this.keyword === '') return
      // console.log('点击搜索按钮了存储历史啦', this.keyword)
      this.addHistrory(this.keyword)
    },
    // 点击联想建议词条存储历史
    clickSuggest (i) {
      // console.log('点击联想建议词条存储历史啦', this.suggestionsList[i])
      this.addHistrory(this.suggestionsList[i])
    },
    addHistrory (str) {
      console.log(123)
      // console.log(str)
      // ['a','b','c']  -> c 先加后移除 ['c','a','b','c']
      // ['a','b','c']  -> c 先移除后追加 ['c','a','b']
      // 1. 数组中不允许出现重复历史 先移除后追加
      // this.history.includes(this.keyword)  some includes只返回布尔值
      const i = this.history.findIndex(item => item === str)
      // console.log(i)
      // 判断i是否为-1 如果是-1 是可以直接追加  不是-1先截取再追加
      if (i !== -1) {
        this.history.splice(i, 1)
      }
      // 2. 新增的历史unsfit前置追加
      this.history.unshift(str)
      // 设置历史的本地存储
      setHistory(this.history)
      // 跳转到搜索结果页面
      this.$router.push('/result?keyword=' + str)
    },
    // 删除历史
    delHistory (index) {
      this.history.splice(index, 1)
      // 设置历史的本地存储
      setHistory(this.history)
    },
    delayTime () {
      setTimeout(() => {
        this.isFocus = false
      }, 300)
    }
  },
  computed: {
    handlerSuggestionList () {
      /*  const resarr = this.suggestionsList.map(item => {
         const reg = new RegExp(this.keyword, 'ig')
         const newstr = item.replace(reg, (match) => {
           return `<span style="color:red">${match}</span>` // 正则匹配的函数必须有return
         })
         return newstr // map函数的return
       })
       return resarr // 计算属性的return
     } */
      return this.suggestionsList.map(item => {
        const reg = new RegExp(this.keyword, 'ig')
        return item.replace(reg, (match) => `<span style="color:red">${match}</span>`)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
